<!--  管理平台-行业模板管理  -->

<template>
  <div class="centeet">
    <div class="top">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="模版名称">
                <a-input placeholder="请输入" v-model="form.name" allowClear></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="核算标准">
                <a-select placeholder="请选择" v-model="form.standardId" allowClear>
                  <a-select-option v-for="province in provinceData" :key="province.key">
                    {{ province.title }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <span style="float: right; overflow: hidden" class="table-page-search-submitButtons">
              <a-col :span="6">
                <a-button type="primary" @click="searchQuery">查询</a-button>
                <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
              </a-col>
            </span>
          </a-row>
        </a-form>
      </div>
    </div>

    <div class="tables">
      <a-button type="primary" @click="handleAdd" class="m_mb24" icon="plus">新增模版</a-button>
      <a-table size="middle" :columns="columns" :data-source="listArr" bordered @change="onchange"
               :pagination="pagination">
        <template slot="operation" slot-scope="text, record, index">
          <div class="editable-row-operations">
            <template v-if="record.status == 0">
              <a @click="() => savePublist(record)">发布</a>
            </template>
            <template v-else>
              <a @click="() => saveCancel(record)">取消发布</a>
            </template>
            <a-divider type="vertical"/>
            <a @click="() => saveCopy(record.id)">复制</a>
            <a-divider type="vertical"/>
            <a @click="() => saveChange(record.id)">编辑</a>
            <a-divider type="vertical"/>
            <a-popconfirm title="确定删除吗?" cancelText="取消" okText="确定" @confirm="() => saveDelte(record.id)">
              <a>删除</a>
            </a-popconfirm>
          </div>
        </template>
      </a-table>
    </div>

    <section class="m_popupBox" v-if="isShowDetailPopup">
      <tpyzDetail
          ref="tpyzDetail"
          addUrl="/orgCarbonEmissionSource/addSystemFromAdmin"
          editUrl="/orgCarbonEmissionSource/addSystemFromAdmin"
          saveUrl="/orgCheckTemplate/addProfessionFromAdmin"
          @back="back"
          :type="type"
          :queryId="queryId"
          :newForm="tpyzObject"
          :isCopy="isCopy">
      </tpyzDetail>
    </section>
  </div>
</template>
<script>
import tpyzDetail from "@comp/common/tpyzDetail.vue";
import {getAction, postAction, deleteAction} from "@api/manage";
import moment from "moment";
import {cloneObject} from "@/utils/util";
import basicDrawer from "@comp/common/basicDrawer.vue";

export default {
  name: "templateAdmin",
  components: {
    basicDrawer,
    tpyzDetail,
  },
  data() {
    return {
      type: 1, //1新增   2数据核算填报
      columns: [
        {
          title: "模板名称",
          align: "center",
          dataIndex: "name",
        },
        {
          title: "发布状态",
          dataIndex: "status_dictText",
          align: "center",
        },
        {
          title: "核算标准",
          dataIndex: "standardId_dictText",
          align: "center",
        },
        {
          align: "center",
          title: "所属行业",
          dataIndex: "profession_dictText",
        },
        {
          align: "center",
          title: "创建人",
          dataIndex: "createBy_dictText",
        },
        {
          align: "center",
          title: "更新时间",
          dataIndex: "createTime",
        },
        {
          align: "center",
          title: "操作",
          dataIndex: "operation",
          scopedSlots: {customRender: "operation"},
        },
      ],
      provinceData: [],
      pagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条';
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      listArr: [],
      isShowDetailPopup: false,
      isCopy: false,
      form: {},
      tpyzObject: {
        year: "",
        targetId: undefined,
      },
      queryId: "",
    };
  },
  mounted() {
    this.queryOrgPageList(1);
    this.loadTreeRoot();
  },
  methods: {
    back() {
      this.isShowDetailPopup = false;
      this.queryOrgPageList(1);
    },
    /**
     * 查看编辑模版
     */
    saveChange(value) {
      console.log(value);
      this.queryId = value;
      this.isCopy = false
      this.isShowDetailPopup = true;
    },
    /**
     * 复制模版
     * @param value
     */
    saveCopy(value) {
      console.log(value);
      this.queryId = value;
      this.isCopy = true
      this.isShowDetailPopup = true;
    },
    /**
     * 删除模版
     */
    saveDelte(value) {
      getAction("/orgCheckTemplate/removeById", {
        id: value,
      }).then((res) => {
        if (res.success) {
          this.queryOrgPageList(1);
        }
      });
    },
    /**
     * 取消发布模版
     */
    saveCancel(value) {
      getAction("/orgCheckTemplate/cancelPublish", {
        id: value.id,
      }).then((res) => {
        if (res.success) {
          this.$message.success("操作成功")
          this.queryOrgPageList(1);
        } else {
          this.$message.error(res.message)
        }
      });
    },
    /**
     * 发布模版
     */
    savePublist(value) {
      getAction("/orgCheckTemplate/publish", {
        id: value.id,
      }).then((res) => {
        if (res.success) {
          this.$message.success("操作成功")
          this.queryOrgPageList(1);
        } else {
          this.$message.error(res.message)
        }
      });
    },
    /**
     * 核算标准
     */
    loadTreeRoot() {
      getAction("/sys/category/loadTreeRoot", {
        pcode: "A01",
        async: true,
      }).then((res) => {
        if (res.success) {
          this.provinceData = res.result || [];
        }
      });
    },
    /**
     * 用户数据分页
     */
    queryOrgPageList(page) {
      if (page === 1) {
        this.pagination.current = 1;
      }
      let reqData = cloneObject(this.form)
      if(reqData.name){
        reqData.name = `*${reqData.name}*`
      }
      reqData.pageNo = this.pagination.current
      reqData.pageSize = this.pagination.pageSize
      getAction("/orgCheckTemplate/querySystemPageList", reqData).then((res) => {
        if (res.success) {
          this.listArr = res.result.records || [];
          this.pagination.total = res.result.total;
        }
      });
    },
    /**
     * 查詢
     */
    searchQuery() {
      this.queryOrgPageList(1);
    },
    /**
     * 重置
     */
    searchReset() {
      this.form = {};
      this.queryOrgPageList(1);
    },
    //分页
    onchange(e) {
      console.log(e);
      this.pagination = e;
      this.queryOrgPageList();
    },
    //打开抽屉
    handleAdd() {
      this.queryId = "";
      this.type = 1;
      this.isShowDetailPopup = true;
    },
  },
};
</script>
<style lang="less" scoped>
.flexs {
  display: flex;
  align-items: center;
  margin-left: 35px;
}

.colors {
  span {
    color: red;
  }
}

.editable-row-operations {
  display: flex;
  align-items: center;

  justify-content: center;
}

.centeet {
  padding: 24px;
}

.mar-bonst {
  margin-bottom: 66px;
}

.felxs {
  justify-content: flex-end;
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  padding: 10px 16px;
  background: #fff;
  text-align: right;
  display: flex;
  align-items: center;
  z-index: 1;

  .quxiao {
    width: 60px;
    height: 32px;
    background: #e7e7e7;
    border-radius: 3px 3px 3px 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.9);
  }

  .sunber {
    width: 60px;
    height: 32px;
    background: #148958;
    border-radius: 3px 3px 3px 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    margin-left: 8px;
  }
}

.color1 {
  color: #888888;
}

.inpts {
  width: 80px !important;
}

.tianjia {
  width: 380px;
  height: 156px;
  background: #f8f8f8;
  border-radius: 3px 3px 3px 3px;
  border: 1px solid #d9d9d9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .color {
    color: #888888;
  }

  .leftShoudong {
    background: #fff !important;
    border-color: #148958 !important;
    color: #148958 !important;
  }

  .marRight {
    margin-left: 16px;
  }
}

.tables {
  padding: 24px;
  background: #ffffff;
  border-radius: 3px 3px 3px 3px;
  border: 1px solid #eeeeee;
  margin-top: 24px;
}

.top {
  background: #ffffff;
  border-radius: 3px 3px 3px 3px;
  padding: 24px 24px 0;
}
</style>
